<template>
  <div class="circle-map" id="circle-map">

  </div>
</template>
<script>
import {ImageLayer, PointLayer, Popup, Scene} from '@antv/l7'
import {TencentMap} from "@antv/l7-maps";
import {nanoid} from "nanoid";
import Vue from "vue";
import DroneDialog from "@/components/Home/MapDialog/DroneDialog.vue";
import CircleDialog from "@/components/Circle/MapDialog/CircleDialog.vue";
import StationDialog from "@/components/Circle/MapDialog/StationDialog.vue";

export default {
  name: 'CircleMap',
  props: {
    tabActive: {
      required: true,
      type: Number
    }
  },
  watch: {
    tabActive: {
      handler(val) {
        this.scene.removeAllLayer();
        switch (val) {
          case 1:
            this.setCirclePoint();
            this.setPoliceStation();
            this.setDronePosition();
            break;
          case 2:
            this.setPoliceStation();
            break;
          case 3:
            this.setDronePosition();
            break;
          case 4:
            this.setCirclePoint();
            break;
        }
      }
    }
  },
  data() {
    return {
      scene: null,
      allLayers: [],
      circleData: [
        {
          name:'城西特警快反屯警点',
          desc:'城西特警快反屯警点巡防区域:酒泉市第一人民医院(总院)、锦玉公园美溪公园、酒泉市体育馆、万达广场酒泉第七中学、肃州中学、酒师附小(翰林校区)、酒泉市实验幼儿园、酒泉市敦煌路幼儿园、飞天路夜市为重点，与西峰派出所、新城派出所、西关派出所、北苑派出所、玉门油田生活基地派出所应急联动，与市政广场警务站、西关汽车站警务站互为支援。',
          tempId: null,
          lng: 98.463846,
          lat: 39.735732,
          size: 500,
          photo:require('@/assets/images/police-point/1.jpg')
        },
        {
          name:'城南特警快反屯警点',
          desc:'城南特警快反屯警点巡防区域:酒泉高铁南站、春光市场、百合园夜市、酒泉职业技术大学、农垦技工学院、育才学校、玉门油田外国语学院、玉门油田第一中学、玉门油田第二中学、春光小学为重点与高铁南站派出所、新城派出所、火车站派出所、玉门油田生活基地派出所应急联动，与市政广场警务站、富康警务站互为支援。',
          tempId: null,
          lng: 98.514763,
          lat: 39.702342,
          size: 600,
          photo:require('@/assets/images/police-point/2.jpg')
        },
        {
          name:'城东特警快反屯警点',
          desc:'城东特警快反屯警点巡防区域:上亿商贸城、天马湖景区、西汉酒泉胜迹、酒泉第四中学、育英中学、东苑中学、酒泉市第二幼儿园为重点，与东郊派出所南苑派出所、泉湖派出所应急联动，与市政广场警务站、富康警务站、东关十字警务站互为支援。',
          tempId: null,
          lng: 98.550786,
          lat: 39.731348,
          size: 650,
          photo:require('@/assets/images/police-point/3.jpg')
        },
        {
          name:'城北特警快反屯警点',
          desc:'城北特警快反屯警点巡防区域:北郊公园、滨河公园、体育公园、酒泉植物园观光园、北苑学校、北关小学、酒泉体校、酒泉市第三幼儿园、肃州区广播电视局、酒泉市第二人民医院、滨河路早市为重点，与东城关派出所、西城关派出所、果园派出所、银达派出所应急联动，与东方广场警务站东关警务站、西关警务站互为支援。',
          tempId: null,
          lng: 98.526202,
          lat: 39.757155,
          size: 270,
          photo:require('@/assets/images/police-point/4.jpg')
        },
      ],
      policeStation: [
        {
          tempId: null,
          lngLat: {
            lng: 98.495878,
            lat: 39.731747,
          },
          name: '市政警务站',
          type: '一类警务站',
          address: '酒泉市肃州区广场东路',
          photo:'https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/guangchang/WechatIMG48.jpeg'
        },
        {
          tempId: null,
          lngLat: {
            lng: 98.510754,
            lat: 39.745128,
          },
          name: '东方广场警务站',
          type: '二类警务站',
          address: '甘肃省酒泉市肃州区北大街东方广场',
          photo:'https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/guangchang/%E4%B8%9C%E6%96%B9%E5%B9%BF%E5%9C%BA.jpg'
        },
        {
          tempId: null,
          lngLat: {
            lng: 98.504508,
            lat: 39.732093,
          },
          name: '富康警务站',
          type: '三类警务站',
          address: '酒泉市肃州区富康路',
          photo:'https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/guangchang/%E5%AF%8C%E5%BA%B7%E5%B9%BF%E5%9C%BA.jpg'
        },
        {
          tempId: null,
          lngLat: {
            lng: 98.497775,
            lat: 39.745308,
          },
          name: '西关警务站',
          type: '三类警务站',
          address: '酒泉市肃州区西关路西关汽车站',
          photo: 'https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/guangchang/%E8%A5%BF%E5%85%B3%E6%B1%BD%E8%BD%A6%E7%AB%99.jpg'
        },
        {
          tempId: null,
          lngLat: {
            lng: 98.519833,
            lat: 39.743721,
          },
          name: '东关警务站',
          type: '三类警务站',
          address: '酒泉市肃州区东环北路2-1号',
          photo: 'https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/guangchang/%E4%B8%9C%E5%85%B3%E4%BB%80%E5%AD%97.jpg'
        },
      ],
      dronePosition: [
        {tempId: null, name: '酒泉市市政大厦无人机回传画面', lngLat: {lng: 98.494269, lat: 39.730076}},
        {tempId: null, name: '酒泉市南大街无人机回传画面', lngLat: {lng: 98.510397, lat: 39.741017,}},
      ]
    }
  },
  methods: {
    initMap() {
      this.scene = new Scene({
        id: 'circle-map',
        logoVisible: false,
        antialias: true,
        map: new TencentMap({
          zoom: 14,
          minZoom: 14,
          maxZoom: 14,
          center: [98.494247, 39.733017],
          rotateEnable: false,
          pitch: 0,
          mapStyleId: 'style2'
        })
      })
      this.setCirclePoint();
      this.setPoliceStation();
      this.setDronePosition();
    },
    setCirclePoint() {
      for (const item of this.circleData) {
        const pointLayer = new PointLayer({})
            .source({
              type: 'FeatureCollection',
              features: [
                {
                  type: 'Feature',
                  properties: {},
                  geometry: {
                    type: 'Point',
                    coordinates: [item.lng, item.lat]
                  },
                },
              ],
            })
            .shape('circle')
            .color('rgba(10,167,255,0.1)')
            .size(item.size * 0.55)
            .style({
              stroke: '#0AA7FF',
              strokeWidth: 1,
              strokeOpacity: 1,
            })
        item.tempId = pointLayer.id;
        pointLayer.on('click', (event) => {
          const point = this.circleData.find(item1 => item1.tempId === pointLayer.id)
          this.scene.panTo([point.lng, point.lat])
          const id = 'circle-dialog-' + nanoid(10)
          const popup = new Popup({
            lngLat: event.lngLat,
            closeOnClick: true,
            closeOnEsc: true,
            title: point.name,
            html: `<div class="circle-map-dialog" style="width:100%;height:100%" id="${id}"></div>`,
            offsets: [-30, 30]
          })
          let componentInstance = null
          popup.on('open', () => {
            componentInstance = new Vue({
              render(h) {
                return h(CircleDialog,{
                  props:{
                    info:point
                  }
                })
              }
            }).$mount('#' + id)
          })
          popup.on('close', () => {
            if (componentInstance) {
              componentInstance.$destroy()
            }
          })
          this.scene.addPopup(popup)

        })
        this.scene.addLayer(pointLayer)

        const pointImageLayer = new ImageLayer({});
        const pointImageSize = {x: 0.002, y: 0.0015}
        const pointImageOffset = {x: 0.0000, y: 0.0001}
        pointImageLayer.source(require('@/assets/images/police-point.png'), {
          parser: {
            type: 'image',
            extent: [
              item.lng - pointImageSize.x + pointImageOffset.x, item.lat - pointImageSize.y + pointImageOffset.y, item.lng + pointImageSize.x + pointImageOffset.x, item.lat + pointImageSize.y + pointImageOffset.y
            ],
          },
        });
        this.scene.addLayer(pointImageLayer)

        const blueTextLayer=new PointLayer({zIndex:10}).source({
          type:'FeatureCollection',
          features:[
            {
              type:'Feature',
              properties: {
                name: item.name
              },
              geometry: {
                type: 'Point',
                coordinates: [item.lng,item.lat]
              }
            }
          ]
        }).shape('name','text').color('#0AA7FF').style({
          textAnchor:'center',
          spacing:2,
          opacity:1,
          fontWeight:900,
          textOffset:[0,-60]
        }).size(12)
        this.scene.addLayer(blueTextLayer)
      }
    },
    setPoliceStation() {
      for (let item of this.policeStation) {
        const layer = new ImageLayer({});
        const size = {x: 0.002, y: 0.0013}
        const offset = {x: -0.0001, y: 0.0001}
        layer.source(require('@/assets/images/police-room.png'), {
          parser: {
            type: 'image',
            extent: [
              item.lngLat.lng - size.x + offset.x, item.lngLat.lat - size.y + offset.y, item.lngLat.lng + size.x + offset.x, item.lngLat.lat + size.y + offset.y
            ],
          },
        });
        item.tempId = layer.id;
        layer.on('click', (event) => {
          const point = this.policeStation.find(item1 => item1.tempId === layer.id)
          this.scene.panTo([event.lngLat.lng, event.lngLat.lat])
          const id = 'station-dialog-' + nanoid(10)
          const popup = new Popup({
            lngLat: event.lngLat,
            closeOnClick: true,
            closeOnEsc: true,
            title: point.name,
            html: `<div class="station-map-dialog" style="width:100%;height:100%" id="${id}"></div>`,
            offsets: [-30, 30]
          })
          let componentInstance = null
          popup.on('open', () => {
            componentInstance = new Vue({
              render(h) {
                return h(StationDialog,{
                  props:{
                    info:point
                  }
                })
              }
            }).$mount('#' + id)
          })
          popup.on('close', () => {
            if (componentInstance) {
              componentInstance.$destroy()
            }
          })
          this.scene.addPopup(popup)

        })
        this.scene.addLayer(layer)
      }
    },
    setDronePosition() {
      for (const item of this.dronePosition) {
        const layer = new ImageLayer({});
        const size = {x: 0.002, y: 0.002}
        const offset = {x: 0.0000, y: 0.0001}
        layer.source(require('@/assets/images/drone.png'), {
          parser: {
            type: 'image',
            extent: [
              item.lngLat.lng - size.x + offset.x, item.lngLat.lat - size.y + offset.y, item.lngLat.lng + size.x + offset.x, item.lngLat.lat + size.y + offset.y
            ],
          },
        });
        item.tempId = layer.id;
        layer.on('click', (event) => {
          const point = this.dronePosition.find(item1 => item1.tempId === layer.id)
          this.scene.panTo([event.lngLat.lng, event.lngLat.lat])

          const id = 'drone-dialog-' + nanoid(10)
          const popup = new Popup({
            lngLat: event.lngLat,
            closeOnClick: true,
            closeOnEsc: true,
            title: point.name,
            html: `<div class="drone-map-dialog" style="width:100%;height:100%" id="${id}"></div>`,
            offsets: [-30, 30]
          })
          let componentInstance = null
          popup.on('open', () => {
            componentInstance = new Vue({
              render(h) {
                return h(DroneDialog)
              }
            }).$mount('#' + id)
          })
          popup.on('close', () => {
            if (componentInstance) {
              componentInstance.$destroy()
            }
          })
          this.scene.addPopup(popup)
        })
        this.scene.addLayer(layer)
      }
    }
  },
  mounted() {
    this.initMap();
  }
}
</script>
<style lang="scss">
.circle-map {
  .l7-marker-container {
    z-index: 3 !important;
  }

  .l7-popup {
    width: auto !important;

    .l7-popup-tip {
      display: none;
    }

    .l7-popup-content {
      width: auto !important;
      background: url("~@/assets/images/map-dialog-background.png") no-repeat center;
      background-size: 100% 100%;
      padding: 12px;
      position: relative;

      .l7-iconfont.l7-popup-close-button {
        display: none;
      }

      .l7-popup-content__title {
        color: $fontColorMain;
      }
    }
  }
}
</style>
<style scoped lang="scss">
.circle-map {
  width: 100%;
  height: 100%;
}
</style>
